<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我们 - Gallery</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        :root {
            --primary-bg: #1a1a1a;
            --accent-gold: #d4af37;
            --text-light: #f8f8f8;
            --text-muted: #a0a0a0;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--primary-bg);
            color: var(--text-light);
            overflow-x: hidden;
        }
        
        .nav-blur {
            backdrop-filter: blur(20px);
            background: rgba(26, 26, 26, 0.8);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }
        
        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        
        .tech-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .tech-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
        }
        
        .feature-icon {
            background: linear-gradient(135deg, var(--accent-gold), #f4d03f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="index.html" class="text-xl font-bold gradient-text">Gallery</a>
                </div>
                <!-- User Menu -->
                <div class="hidden md:flex items-center space-x-4">
                    <div id="user-menu" class="hidden items-center space-x-3">
                        <button id="user-menu-btn" class="flex items-center space-x-2 text-gray-300 hover:text-yellow-400 transition-colors">
                            <img id="user-avatar" src="resources/default-avatar.jpg" alt="头像" class="w-8 h-8 rounded-full">
                            <span id="username" class="text-sm font-medium"></span>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </button>
                    </div>
                    <a href="login.html" id="login-btn" class="text-gray-300 hover:text-yellow-400 px-3 py-2 text-sm font-medium transition-colors">登录</a>
                    <a href="register.html" id="register-btn" class="bg-yellow-500 hover:bg-yellow-600 text-black px-4 py-2 rounded-lg text-sm font-medium transition-colors">注册</a>
                </div>
            </div>
        </div>
        
        <!-- User Dropdown Menu -->
        <div id="user-dropdown" class="hidden absolute right-4 top-16 mt-2 w-48 bg-gray-800 rounded-lg shadow-lg border border-gray-700 z-50">
            <div class="py-2">
                <a href="profile.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">个人中心</a>
                <a href="upload.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">上传照片</a>
                <a href="gallery.html" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-yellow-400 transition-colors">照片墙</a>
                <hr class="border-gray-700">
                <button id="logout-btn" class="block w-full text-left px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 hover:text-red-400 transition-colors">退出登录</button>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="pt-24 pb-16 px-4">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-6xl font-bold gradient-text mb-6 scroll-reveal">关于 Gallery</h1>
            <p class="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed scroll-reveal">
                我们致力于打造一个优雅、现代的照片展示平台，让每一张照片都能以最完美的方式呈现，让摄影艺术的魅力得到充分展现。
            </p>
        </div>
    </section>

    <!-- Mission Section -->
    <section class="py-16 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div class="scroll-reveal">
                    <h2 class="text-3xl md:text-4xl font-bold gradient-text mb-6">我们的使命</h2>
                    <p class="text-gray-300 text-lg leading-relaxed mb-6">
                        在这个视觉信息爆炸的时代，我们相信每一张照片都有其独特的故事和情感。Gallery 致力于为摄影师和摄影爱好者提供一个专业、优雅的展示平台。
                    </p>
                    <p class="text-gray-300 text-lg leading-relaxed mb-6">
                        通过现代化的设计理念和先进的技术实现，我们希望让照片浏览成为一种享受，让每一次点击都能带来视觉的震撼和心灵的触动。
                    </p>
                    <div class="grid grid-cols-2 gap-6 mt-8">
                        <div class="text-center">
                            <div class="text-3xl font-bold gradient-text">30+</div>
                            <div class="text-gray-400">精选照片</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold gradient-text">7</div>
                            <div class="text-gray-400">照片分类</div>
                        </div>
                    </div>
                </div>
                <div class="scroll-reveal">
                    <div class="bg-gray-800 rounded-2xl p-8">
                        <h3 class="text-2xl font-bold mb-6 text-center">核心特色</h3>
                        <div class="space-y-4">
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
                                    <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold">快速响应</h4>
                                    <p class="text-gray-400 text-sm">优化的加载性能</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
                                    <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold">移动友好</h4>
                                    <p class="text-gray-400 text-sm">完美的移动体验</p>
                                </div>
                            </div>
                            <div class="flex items-center">
                                <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
                                    <svg class="w-6 h-6 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"></path>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold">智能搜索</h4>
                                    <p class="text-gray-400 text-sm">快速找到目标内容</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technology Stack -->
    <section class="py-16 px-4 bg-gray-900">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12 scroll-reveal">
                <h2 class="text-3xl md:text-4xl font-bold gradient-text mb-4">技术栈</h2>
                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                    采用现代化的技术架构，确保网站的性能、可维护性和用户体验
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="tech-card bg-gray-800 p-6 rounded-xl scroll-reveal">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">前端框架</h3>
                    </div>
                    <ul class="text-gray-300 space-y-2">
                        <li>• HTML5 + CSS3 + JavaScript ES6+</li>
                        <li>• Tailwind CSS 样式框架</li>
                        <li>• 响应式设计原则</li>
                        <li>• 现代浏览器兼容</li>
                    </ul>
                </div>
                
                <div class="tech-card bg-gray-800 p-6 rounded-xl scroll-reveal">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">动画效果</h3>
                    </div>
                    <ul class="text-gray-300 space-y-2">
                        <li>• Anime.js 动画库</li>
                        <li>• CSS3 过渡效果</li>
                        <li>• Intersection Observer API</li>
                        <li>• 滚动触发动画</li>
                    </ul>
                </div>
                
                <div class="tech-card bg-gray-800 p-6 rounded-xl scroll-reveal">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">布局系统</h3>
                    </div>
                    <ul class="text-gray-300 space-y-2">
                        <li>• Masonry.js 瀑布流</li>
                        <li>• CSS Grid 网格布局</li>
                        <li>• Flexbox 弹性布局</li>
                        <li>• 响应式断点设计</li>
                    </ul>
                </div>
                
                <div class="tech-card bg-gray-800 p-6 rounded-xl scroll-reveal">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">交互功能</h3>
                    </div>
                    <ul class="text-gray-300 space-y-2">
                        <li>• 智能搜索过滤</li>
                        <li>• 照片灯箱查看</li>
                        <li>• 分类标签系统</li>
                        <li>• 键盘导航支持</li>
                    </ul>
                </div>
                
                <div class="tech-card bg-gray-800 p-6 rounded-xl scroll-reveal">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">用户体验</h3>
                    </div>
                    <ul class="text-gray-300 space-y-2">
                        <li>• 图片懒加载优化</li>
                        <li>• 渐进式图片加载</li>
                        <li>• 触摸手势支持</li>
                        <li>• 无障碍访问优化</li>
                    </ul>
                </div>
                
                <div class="tech-card bg-gray-800 p-6 rounded-xl scroll-reveal">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold mb-2">性能优化</h3>
                    </div>
                    <ul class="text-gray-300 space-y-2">
                        <li>• 代码分割加载</li>
                        <li>• 资源压缩优化</li>
                        <li>• 缓存策略实施</li>
                        <li>• CDN 加速部署</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Guide -->
    <section class="py-16 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12 scroll-reveal">
                <h2 class="text-3xl md:text-4xl font-bold gradient-text mb-4">使用指南</h2>
                <p class="text-gray-400 text-lg max-w-2xl mx-auto">
                    了解如何充分利用 Gallery 的各项功能，获得最佳的浏览体验
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div class="scroll-reveal">
                    <h3 class="text-2xl font-bold mb-6">浏览功能</h3>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-4 mt-1">
                                <span class="text-black font-bold text-sm">1</span>
                            </div>
                            <div>
                                <h4 class="font-semibold mb-2">分类过滤</h4>
                                <p class="text-gray-400">点击顶部的分类标签，快速筛选您感兴趣的照片类型。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-4 mt-1">
                                <span class="text-black font-bold text-sm">2</span>
                            </div>
                            <div>
                                <h4 class="font-semibold mb-2">智能搜索</h4>
                                <p class="text-gray-400">使用搜索框输入关键词，实时查找相关的照片内容。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-4 mt-1">
                                <span class="text-black font-bold text-sm">3</span>
                            </div>
                            <div>
                                <h4 class="font-semibold mb-2">布局切换</h4>
                                <p class="text-gray-400">在瀑布流、网格和列表布局之间切换，选择最适合的浏览方式。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="scroll-reveal">
                    <h3 class="text-2xl font-bold mb-6">交互功能</h3>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-4 mt-1">
                                <span class="text-black font-bold text-sm">4</span>
                            </div>
                            <div>
                                <h4 class="font-semibold mb-2">照片详情</h4>
                                <p class="text-gray-400">点击任意照片打开全屏查看器，欣赏高清画质和详细信息。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-4 mt-1">
                                <span class="text-black font-bold text-sm">5</span>
                            </div>
                            <div>
                                <h4 class="font-semibold mb-2">键盘导航</h4>
                                <p class="text-gray-400">在照片查看器中使用方向键切换照片，ESC键关闭查看器。</p>
                            </div>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center mr-4 mt-1">
                                <span class="text-black font-bold text-sm">6</span>
                            </div>
                            <div>
                                <h4 class="font-semibold mb-2">收藏分享</h4>
                                <p class="text-gray-400">收藏喜爱的照片，通过社交媒体与朋友分享美好时光。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="py-16 px-4 bg-gray-900">
        <div class="max-w-4xl mx-auto text-center">
            <div class="scroll-reveal">
                <h2 class="text-3xl md:text-4xl font-bold gradient-text mb-6">联系我们</h2>
                <p class="text-gray-400 text-lg mb-8 max-w-2xl mx-auto">
                    如果您有任何问题、建议或合作意向，欢迎随时与我们联系。我们期待着听到您的声音。
                </p>
                
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="text-center">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold mb-2">邮箱</h3>
                        <p class="text-gray-400">contact@gallery.com</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold mb-2">地址</h3>
                        <p class="text-gray-400">北京市朝阳区</p>
                    </div>
                    
                    <div class="text-center">
                        <div class="w-16 h-16 bg-yellow-500 rounded-full flex items-center justify-center mx-auto mb-4">
                            <svg class="w-8 h-8 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                            </svg>
                        </div>
                        <h3 class="font-semibold mb-2">电话</h3>
                        <p class="text-gray-400">+86 138 0000 0000</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-black py-12 px-4">
        <div class="max-w-7xl mx-auto text-center">
            <div class="mb-8">
                <h3 class="text-2xl font-bold gradient-text mb-4">Gallery</h3>
                <p class="text-gray-400 max-w-md mx-auto">
                    用心记录每一个美好瞬间，用镜头诉说生活的故事
                </p>
            </div>
            <div class="border-t border-gray-800 pt-8">
                <p class="text-gray-500">
                    © 2025 Gallery. 保留所有权利。
                </p>
            </div>
        </div>
    </footer>

    <script src="mode/main.js"></script>
    <script>
        // About page specific functionality
        document.addEventListener('DOMContentLoaded', function() {
            setupScrollReveal();
            initializeAboutAnimations();
        });

        function initializeAboutAnimations() {
            // Animate tech cards on hover
            const techCards = document.querySelectorAll('.tech-card');
            techCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                    anime({
                        targets: this,
                        scale: [1, 1.02],
                        duration: 200,
                        easing: 'easeOutQuad'
                    });
                });
                
                card.addEventListener('mouseleave', function() {
                    anime({
                        targets: this,
                        scale: [1.02, 1],
                        duration: 200,
                        easing: 'easeOutQuad'
                    });
                });
            });

            // Animate feature icons
            const featureIcons = document.querySelectorAll('.feature-icon');
            featureIcons.forEach((icon, index) => {
                anime({
                    targets: icon,
                    scale: [0, 1],
                    rotate: [0, 360],
                    duration: 800,
                    easing: 'easeOutElastic(1, .8)',
                    delay: index * 100
                });
            });
        }
    </script>
</body>
</html>